{% extends 'base.html' %}

{% block title %}首页 - 外卖订餐系统{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="jumbotron text-center py-5 bg-light rounded">
        <h1 class="display-4">欢迎来到外卖订餐系统</h1>
        <p class="lead">美味佳肴，触手可及</p>
        <hr class="my-4">
        <p>浏览我们的餐厅列表，找到您喜欢的美食</p>
        <a class="btn btn-primary btn-lg" href="{% url 'order:restaurant_list' %}" role="button">
            <i class="fas fa-utensils me-2"></i>浏览餐厅
        </a>
    </div>

    <div class="row mt-5">
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-store fa-3x mb-3 text-primary"></i>
                    <h5 class="card-title">丰富选择</h5>
                    <p class="card-text">数百家精选餐厅，满足您的各种口味需求</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-shipping-fast fa-3x mb-3 text-success"></i>
                    <h5 class="card-title">快速配送</h5>
                    <p class="card-text">专业配送团队，确保美食新鲜送达</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-shield-alt fa-3x mb-3 text-info"></i>
                    <h5 class="card-title">安全支付</h5>
                    <p class="card-text">支持多种支付方式，交易安全有保障</p>
                </div>
            </div>
        </div>
    </div>

    {% if user.is_authenticated %}
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">快捷操作</h5>
                    <div class="btn-group">
                        <a href="{% url 'order:order_list' %}" class="btn btn-outline-primary">
                            <i class="fas fa-list me-2"></i>我的订单
                        </a>
                        <a href="{% url 'password_change' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-key me-2"></i>修改密码
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

{% block extra_css %}
<style>
    .jumbotron {
        background-color: #f8f9fa;
        border-radius: 0.3rem;
    }
    .card {
        transition: transform 0.2s;
    }
    .card:hover {
        transform: translateY(-5px);
    }
    .fa-3x {
        margin-bottom: 1rem;
    }
</style>
{% endblock %}
{% endblock %}
